<template>
    <div class="center">
        <div id="hpv_main" class="leftCenter_left"> </div>
        <div class="hpv"><span>HPV</span></div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: "hpv",
    data() {
        return {};
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            let chartDom = document.getElementById("hpv_main");
            let myChart = echarts.init(chartDom);

            let option = {
                tooltip: {
                    formatter: '{a}:{c}'
                },
                series: [
                    {
                        name: 'HPV',
                        type: 'gauge',
                        min: 0,
                        max: 100,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(251, 141, 36,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(50,197,255,1)'
                                }
                            ])
                        },
                        progress: {
                            show: true,
                            width: 18
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}',
                            offsetCenter: [0, 0],
                            color: '#fff',
                            fontSize: 20
                        },
                        //仪表盘轴线相关配置。
                        axisLine: {
                            show: true,
                            // 属性lineStyle控制线条样式
                            lineStyle: {
                                width: 18,
                                color: [[1, '#07628d']]
                            }
                        },
                        //仪表盘指针。
                        pointer: {
                            show: true,
                            showAbove: true,
                            icon: 'triangle',
                            width: 10,
                            length: '90%',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(255,140,56,1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(17,43,84,0)'
                                    }
                                ])
                            }
                        },
                        //分隔线样式。
                        splitLine: {
                            show: false,
                            distance: -30
                        },
                        //刻度样式。
                        axisTick: {
                            show: true,
                            distance: -25,
                            lineStyle: {
                                color: '#19EBFF'
                            }
                        },
                        //刻度标签。
                        axisLabel: {
                            show: true,
                            distance: 0,
                            textStyle: {
                                color: '#19EBFF',
                                fontSize: 11,
                                fontWeight: 'bold'
                            }
                        },
                        data: [
                            {
                                value: 50
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        min: 0,
                        max: 100,
                        itemStyle: {
                            color: '#19EbFF'
                        },
                        progress: {
                            show: true,
                            width: 2
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: 100
                            }
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener('resize', myChart.resize);
        },
    },
};
</script>
<style  scoped>
.center {
    width: 100%;
    height: 100%;
}

.leftCenter_left {
    margin-top: .3125rem;
    width: 100%;
    height: calc(100% - 10px);
}

.hpv {
    text-align: center;
    margin-top: -40px;
    color: #FFFFFF;
}

.hpv span {
    font-size: 22px;
    font-weight: 800;
}
</style>
            